<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport"
    content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
  <title>movie</title>
  <style>
    html {
      /* background-color: #0b0813; */
      width: 375px;
      color: #fff;
      overflow-x: hidden;
      margin: 0 auto;
      position: relative;
    }

    body {
      background: #181531;
      font-family: sans-serif;
    }

    h1 {
      font-weight: normal;
      color: #fff;
    }

    .btn {
      display: inline-block;
      cursor: pointer;
      background: rgb(70, 70, 70);
      color: #fff;
      box-shadow: 0 0 1px rgba(0, 0, 0, .2);
      padding: .5em .8em;
      transition: box-shadow .05s ease-in-out;
      -webkit-transition: box-shadow .05s ease-in-out;
      border-radius: 5px;
    }

    .btn:hover {
      box-shadow: 0 0 2px rgba(0, 0, 0, .2);
    }

    .btn:active,
    .active,
    .active:hover {
      box-shadow: 0 0 1px rgba(0, 0, 0, .2),
        inset 0 0 4px rgba(0, 0, 0, .1);
    }

    .add {
      float: right;
    }

    #container {
      max-width: 42em;
      margin: 0 auto 2em auto;
    }

    .list {
      position: relative;
    }

    .row {
      overflow: hidden;
      position: absolute;
      box-sizing: border-box;
      width: 100%;
      left: 0px;
      margin: .5em 0;
      padding: 1em;
      background: #fff;
      box-shadow: 0 0 1px rgba(0, 0, 0, .2);
      transition: transform .5s ease-in-out, opacity .5s ease-out, left .5s ease-in-out;
      -webkit-transition: transform .5s ease-in-out, opacity .5s ease-out, left .5s ease-in-out;
      border-radius: 5px;
      background: #0b0813;
      /* box-shadow:  20px 20px 60px #574f59,
                  -20px -20px 60px #756b79; */
    }

    .row div {
      display: inline-block;
      vertical-align: middle;
    }

    .row>img{
      width: 100px;
      height: 100px;
      display: block;
      margin: 5px 0;
    }

    .row>div:nth-child(1) {
      /* width: 5%; */
      color: #fff;
    }

    .row>div:nth-child(2) {
      display: inline;
      padding-left: 2%;
      /* width: 30%; */
      color: #fff;
    }

    .row>div.txt {
      /* width: 65%; */
      color: #fff;
    }

    .rm-btn {
      cursor: pointer;
      position: absolute;
      top: 0;
      right: 0;
      color: #C25151;
      width: 1.4em;
      height: 1.4em;
      color: #0b0813;
      text-align: center;
      line-height: 1.4em;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <script type="module" src="./src/index.js"></script>
  <script>
    (function () {
      var W = 375, w = parseInt(window.screen.width), s = w / W, u = navigator.userAgent.toLowerCase(), m = '<meta name="viewport" content="width=' + W + ',';
      if (/android (\d+\.\d+)/.test(u)) {
        if (parseFloat(RegExp.$1) > 2.3) m += 'minimum-scale=' + s + ',maximum-scale=' + s + ',';
      } else {
        m += 'user-scalable=no,';
      }
      m += 'target-densitydpi=device-dpi">';
      document.write(m);
      document.addEventListener('gesturestart', function (e) {
        e.preventDefault();
      });
      document.addEventListener('dblclick', function (e) {
        e.preventDefault();
      });
      document.addEventListener('touchstart', function (event) {
        if (event.touches.length > 1) {
          event.preventDefault();
        }
      });
      var lastTouchEnd = 0;
      document.addEventListener('touchend', function (event) {
        var now = (new Date()).getTime();
        if (now - lastTouchEnd <= 300) {
          event.preventDefault();
        }
        lastTouchEnd = now;
      }, false);
    }());
  </script>
</body>

</html>